<template>
  <div>
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="addRules"
      v-bind="layout"
    >
      <a-form-model-item has-feedback label="年级" prop="grade">
        <a-input
          v-model="form.grade"
          autocomplete="off"
          placeholder="请输入年级(实例：2)"
        >
        </a-input>
      </a-form-model-item>
      <a-form-model-item has-feedback label="课程名" prop="name">
        <a-input
          v-model="form.name"
          autocomplete="off"
          allow-clear
          placeholder="请输入班级(实例：'语文课')"
        >
        </a-input>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="handleOk"> 确认 </a-button>
        <a-button @click="handleCancel">取消</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import { editCurriculum } from "@/utils/api";
export default {
  name: "curriculum",
  components: {},
  props: {
    form: {
      id: String,
      grade: Number,
      name: String,
    },
  },
  data() {
    let validateName = (rule, value, callback) => {
      if (value === "" || value === " ") {
        callback(new Error("班级不能为空！"));
      } else {
        callback();
      }
    };
    let validateGrade = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("年级不能为空！"));
      } else if (!/^[1-6]{1}$/.test(value)) {
        callback(new Error("该项只能为数字，且在1-6之间"));
      } else {
        callback();
      }
    };
    return {
      addRules: {
        grade: [{ validator: validateGrade, trigger: "change" }],
        name: [{ validator: validateName, trigger: "change" }],
      },
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 15 },
      },
    };
  },
  methods: {
    // 新建/配置 弹窗 确认 按钮
    handleOk() {
      console.log(this.form);
      // 编辑确认
      //   this.$refs["ruleForm"].validate((valid) => {
      //     if (valid) {
      //       this.visible = false;
      //       editCurriculum(this.ruleForm).then((res) => {
      //         this.$nextTick(() => {
      //           if (res.data != null) this.data = res.data;
      //         });
      //       });
      //     }
      //   });
      this.ruleForm = {};
      //   this.visible = false;
    },
    handleCancel() {
      this.ruleForm = {};
      //   this.visible = false;
    },
  },
  // 去掉表单验证信息二次打开残留
  watch: {
    // 去掉表单验证信息二次打开残留
    visible(val) {
      //监听的是控制模态框显示或影藏开关的布尔值
      // 监视dialog状态（打开、关闭）
      if (val) {
        try {
          this.$nextTick(() => {
            this.$refs["ruleForm"].clearValidate(); // 重置编辑表单
          });

          // addForm 为ref指向的表单
        } catch (e) {
          console.log(e);
        }
      }
    },
  },
};
</script>
<style>
</style>